﻿@{
    ViewData["Title"] = "人员管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .layui-table-view .layui-table td .layui-table-cell {
        text-align: center;
        height: 120px;
        line-height: 120px;
    }
</style>
<div class=" demoTable">
    <div class="layui-inline">
        用户编码：
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="title" id="title" autocomplete="off">
    </div>
    <div class="layui-inline">
        用户名：
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="content" id="content" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="search">搜索</button>
    <button class="layui-btn" data-type="add">新增</button>
</div>

<table class="layui-hide" id="DataTable" lay-filter="DataTable" lay-data="{id: 'DataTable'}"></table>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div class="site-text" id="operateWindow" style="margin: 5%; display: none" target="test123">
    <form class="layui-form" action="" lay-filter="form" id="form">
        <input type="hidden" name="userId" />
        <div class="layui-form-item">
            <label class="layui-form-label">用户编码</label>
            <div class="layui-input-block">
                <input type="text" name="userCode" required lay-verify="required" placeholder="请输入用户编码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="tel" name="mobile" required placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="test10">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px" id="avatar" name="avatar">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="iconTpl">
    <img src="{{d.avatar}}" width="100" height="100" style="text-align:center" />
</script>
@section Scripts{
    <script>
        layui.use(['table', 'upload', 'layer', 'form'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var upload = layui.upload;
            var form = layui.form;

            // 1添加 2修改
            var operate = "1"

            /**
             *初期化表格
             **/
            table.render({
                elem: '#DataTable'
                , url: '/User/GetPagedList'
                , method: 'get'
                //, toolbar: true
                //, where: {
                //    Type: "0"
                //}
                , cols: [[
                    { type: 'checkbox' }
                    , { field: 'userCode', title: '用户编码' }
                    , { field: 'userName', title: '用户名', sort: true }
                    , { field: 'mobile', title: '手机号', sort: true }
                    , { field: 'email', title: '邮箱', sort: true }
                    , { field: 'address', title: '地址', sort: true }
                    , { field: 'status', title: '状态', sort: true }
                    , { field: 'userType', title: '用户类型', sort: true }
                    , { field: 'companyId', title: '所属公司', sort: true }
                    , { field: 'integral', title: '积分', sort: true }
                    , { field: 'avatar', title: '头像', sort: true, templet: '#iconTpl', align: "center", width: 130 }
                    , { fixed: 'right', align: 'center', toolbar: '#toolbar' }
                ]]
                , page: true
            });

            /**
             * 监听工具条
            **/
            table.on('tool(DataTable)', function (obj) {
                var data = obj.data;
                // 删除操作
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        let url = "/User/Delete"
                        AjaxTools.PostAjaxData(url, data, function (res) {
                            //layer.msg(JSON.stringify(res));
                            table.reload('DataTable', {
                                url: '/User/GetPagedList'
                            });
                            obj.del();
                            layer.close(index);
                            layer.msg(res > 0 ? "删除成功" : "删除失败！");
                        })
                    });
                    // 编辑操作
                } else if (obj.event === 'edit') {
                    operate = "2"
                    form.val("form", obj.data)
                    layer.open({
                        type: 1,
                        title: "编辑分类",
                        area: ['75%', '75%'],
                        content: $("#operateWindow"),
                        zIndex: 1
                    });
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', obj.data.avatar);
                }
            });

            /**
             * 工具栏操作
             * */
            var $ = layui.$, active = {
                // 查询用户
                search: function () {
                    var title = $('#title').val();
                    var content = $('#content').val();

                    //执行重载
                    table.reload('DataTable', {
                        url: '/User/GetPagedList',
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            title: title,
                            content: content
                        }
                    }, 'data');
                },
                // 新增用户
                add: function () {
                    operate = "1";
                    document.getElementById("form").reset();
                    layer.open({
                        type: 1,
                        title: "添加分类",
                        area: ['75%', '75%'],
                        //btn: ['确定', '取消'],
                        content: $("#operateWindow"),
                        zIndex: 1
                    });
                }
            };


            //拖拽上传
            upload.render({
                elem: '#test10'
                , url: '/Upload/CategoryUpload' //改成您自己的上传接口
                , done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.msg);
                    console.log(res)
                }
            });

            /**
             * 监听提交按钮
             * **/
            form.on('submit(formDemo)', function (data) {
                let invo = data.field;
                invo.avatar = $("#avatar").attr('src');
                invo.type = '0';
                if (operate == "1") {
                    url = "/User/Add";
                    Add(url, invo);
                } else {
                    url = "/User/Edit";
                    Edit(url, invo);
                }
                return false;
            });


            window.Add = function (url, invo) {
                AjaxTools.PostAjax(url, invo, function (res) {
                    if (res.code == "0") {
                        layer.msg(res.errMsg);
                        //layer.closeAll();
                        layer.closeAll('page');
                        //执行重载
                        table.reload('DataTable', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                    } else {
                        layer.msg(res.errMsg);
                    }
                })
            }

            window.Edit = function (url, invo) {
                AjaxTools.PutAjax(url, invo, function (res) {
                    if (res.code == "0") {
                        layer.msg(res.errMsg);
                        //layer.closeAll();
                        layer.closeAll('page');
                        //执行重载
                        table.reload('DataTable', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                    } else {
                        layer.msg(res.errMsg);
                    }
                })
            }

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听表格复选框选择
            table.on('checkbox(DataTable)', function (obj) {
                console.log(obj)
            });

        });
    </script>
}
